<template>
    <div>
        <div class="flex gap-16px mg-b-16">
            <div class="flex-1">
                <insureData title="保险数据" type="fullEnd" :company-id="companyId" :list="Object.values(list)"
                    v-model:date-value="dateList" show-company show-plan
                    v-model:select-insure-company-value="selectInsureCompanyValue"
                    v-model:select-type-value="selectTypeValue" v-model:select-plan-value="selectPlanValue"
                    @change="getInsureData" :insure-type="insureType" />
            </div>
            <div class="flex-1">
                <chartPlans class="h-300 w-full" title="方案统计" :company-id="companyId" :insure-type="insureType"/>
            </div>
        </div>
        <div class="account-box">
            <div class="fs-14 bold pd-l-16 pd-t-16">账户明细</div>
            <rechargeRecord :company-id="companyId" :insure-type="insureType"/>
        </div>
    </div>
</template>
<script setup>
import { ref, watch } from 'vue'
import insureData from '../insureData.vue'
import chartPlans from '../chartPlans.vue'
import rechargeRecord from '../periodInsure/rechargeRecord.vue'
// import accountDetails from './accountDetails.vue';

import { getWesureOperationData, getWesureOperationDataGroup } from '@/api/clients/signClient.ts'

const props = defineProps({
    companyId: {
        type: [String, Number]
    },
    insureType: {
        type: String,
        default: 'day'
    }
})

const dateList = ref([])
const selectInsureCompanyValue = ref('')
const selectTypeValue = ref('')
const selectPlanValue = ref('')

const selectCompanyValue = ref('')

const list = ref({
    amount: {
        name: '保费',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar1',
        decimal: 2
    },
    policyPeopleCount: {
        name: '投保人数',
        hint: '',
        value: '',
        suffix: '人',
        icon: 'bar2'
    },
    recordCount: {
        name: '报案数',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar5',
        decimal: 2
    },
})

const getInsureData = () => {
    if (!props.companyId) return
    if (props.insureType === 'day') {
        getWesureOperationData({
            companyId: props.companyId,
            insurCompanyCode: selectInsureCompanyValue.value,
            comboName: selectPlanValue.value,
            startTime: dateList.value?.length ? dateList.value[0] : '',
            endTime: dateList.value?.length ? dateList.value[1] : ''
        }).then(res => {
            for (const key in list.value) {
                list.value[key].value = res[key]
            }
        })
    } else if (props.insureType === 'group') {
        getWesureOperationDataGroup({
            companyId: props.companyId,
            insurCompanyCode: selectInsureCompanyValue.value,
            tyxPlanName: selectPlanValue.value,
            startTime: dateList.value?.length ? dateList.value[0] : '',
            endTime: dateList.value?.length ? dateList.value[1] : ''
        }).then(res => {
            for (const key in list.value) {
                list.value[key].value = res[key]
            }
        })
    }

}

watch(() => props.companyId, (newval) => {
    if (newval) {
        getInsureData()
    }
}, {
    immediate: true
})

</script>
<style lang="scss" scoped>
.account-box {
    background: #fff;
    border-radius: 8px;
}

.h-300 {
    height: 305px;
}
</style>